<!--主页-->
<template>
  <div>

    <el-row :gutter="2" style="margin-top: -2%">
      <el-col :span="6">
        <el-card style="width: 100%;height: 650px">
          <el-row style="margin-top: -8%">
            <el-col :span="8">
              <span style="font-size: 20px;margin-left: -30px">设备树</span>
            </el-col>
            <el-col :span="8">
              <el-button @click="stop">停止实时刷新</el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-tree :data="data"
                     :props="defaultProps"
                     @node-click="getCurrentNode"
            ></el-tree>
          </el-row>
        </el-card>
      </el-col>

      <el-col :span="18">
        <el-card style="width: 100%;height: 100%">
          <el-row>
          </el-row>
          <el-row style="margin-top: 1%">
            <div id="chartLineBox" style="width: 800px;height: 700px;"></div>
          </el-row>
        </el-card>

      </el-col>
    </el-row>

  </div>
</template>

<script>

  import * as echarts from 'echarts';
  import axios from 'axios';
  import {getNowData} from "../../api/home";

  export default {
    name: "Home",
    data() {
      return {
        homeInternalId: '',
        radio: '',
        chartLabel: '',
        historyForPredict: [],
        historyTimeForPredict: [],
        historyValueForPredict: [],
        predictData: [],
        predictTimeData: '',
        predictValueData: '',
        runningData: [],
        time: [],
        dataQuality: [],
        dataValue: [],
        queryEquip: '',
        data: [{
          label: '测点',
          children: [{
            id: 1,
            label: '炉膛负压',

          }, {
            id: 2,
            label: '热风风量',

          }, {
            id: 3,
            label: '炉膛温度',

          }, {
            id: 4,
            label: '热风温度',

          }, {
            id: 5,
            label: '1供浆流量',

          }, {
            id: 6,
            label: '2供浆流量',

          }, {
            id: 7,
            label: '燃烧器进风压力',
          }]
        },],
        queryList: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },


    mounted() {

      this.queryList = [
        "/Project_XCYW/60dadfcfba3fd02979895e87",//炉膛负压
        "/Project_XCYW/60dadfcfba3fd02979895d78",//热风风量
        "/Project_XCYW/60dadfcfba3fd02979895e55",//炉膛温度
        "/Project_XCYW/60dadfcfba3fd02979895e26",//热风温度
        "/Project_XCYW/60dadfcfba3fd02979895ee4",//1供浆流量
        "/Project_XCYW/60dadfcfba3fd02979895eb9",//2供浆流量
        "/Project_XCYW/60dadfcfba3fd02979895e52",//燃烧器进风压力
      ];
    },

    methods: {


      getData() {

        this.time.splice(0, this.time.length - 8);
        this.dataQuality.splice(0, this.dataQuality.length - 8);
        this.dataValue.splice(0, this.dataValue.length - 8);

        let param = JSON.stringify([this.queryEquip]);
        console.log(param);
        getNowData(param).then((res) => {
          if (res) {
            console.log(res.data);
            var time = new Date(res.data.result[0].t);
            console.log("***********",res.data.result[0].t);
            var newTime = time.getFullYear() + "/" + (time.getMonth() + 1) + "/" + time.getDate() + " " + time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds()
            this.time.push(newTime);
            console.log("^^^^^^^^^^^",this.time);
            this.dataQuality.push(res.data.result[0].s);
            this.dataValue.push(res.data.result[0].v);
            console.log("############",this.dataValue);
          }
        });
        this.echart();
      },

      stop() {
        clearInterval(this.homeInternalId);
      },
      //获取当前点击节点
      getCurrentNode(data) {
        this.chartLabel = '';
        // console.log(data.id);
        for (let i = 0; i < this.queryList.length; i++) {
          if (i + 1 === data.id) {
            this.queryEquip = this.queryList[i]
          }
        }
        this.chartLabel = data.label;
        // console.log(this.queryEquip);
        this.time = [];
        this.dataQuality = [];
        this.dataValue = [];
        clearInterval(this.homeInternalId);
        this.homeInternalId = setInterval(this.getData, 1000);

      },

      //echart相关
      echart() {
        window.addEventListener("resize", () => {
          this.chartLine.resize();
        });

        this.chartLine = echarts.init(document.getElementById('chartLineBox'));

        // 指定图表的配置项和数据
        var option = {
          tooltip: {              //设置tip提示
            trigger: 'axis'
          },

          legend: {               //设置区分（哪条线属于什么）
            data: ['数据值', '数据质量']
          },
          color: ['#8AE09F', '#FA6F53'],       //设置区分（每条线是什么颜色，和 legend 一一对应）
          xAxis: {                //设置x轴
            type: 'category',
            boundaryGap: false,     //坐标轴两边不留白
            data: this.time,

            name: 'DATE',           //X轴 name
            nameTextStyle: {        //坐标轴名称的文字样式
              color: '#FA6F53',
              fontSize: 16,
              padding: [0, 0, 0, 20]
            },
            axisLine: {             //坐标轴轴线相关设置。
              lineStyle: {
                color: '#FA6F53',
              }
            }
          },
          yAxis: {
            scale: true,
            name: this.chartLabel,
            nameTextStyle: {
              color: '#FA6F53',
              fontSize: 16,
              padding: [0, 0, 10, 0]
            },
            axisLine: {
              lineStyle: {
                color: '#FA6F53',
              }
            },
            type: 'value'
          },
          series: [
            {
              name: '数据值',
              data: this.dataValue,

              type: 'line',               // 类型为折线图
              lineStyle: {                // 线条样式 => 必须使用normal属性
                normal: {
                  color: '#8AE09F',
                }
              },
            },
            {
              name: '数据质量',
              data: this.dataQuality,

              type: 'line',
              lineStyle: {
                normal: {
                  color: '#FA6F53',
                }
              },
            },
          ]
        };
        // 使用刚指定的配置项和数据显示图表。

        this.chartLine.setOption(option);

      },

    },

  }
</script>

<style scoped>
  .chart-container {
    width: 100%;
    float: left;
  }

  .el-col {
    padding: 30px 20px;
  }


</style>
